<template>
  <div class="album-content-list">
    <tag-content-header search refresh @toolFun="toolFun" :settingData="columns">
      <!-- <template #title>
        <span>专辑内容</span>
      </template> -->
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #watchFlag="{ scope }">
        <span class="circle" :class="{ red: !scope.row.watchFlag }"></span>
        {{ scope.row.watchFlag ? '是' : '否' }}
      </template>
      <template #hotVal="{ scope }">
        <div class="operation-button-box">
          <icon-svg name="iconFire" v-for="(hot, index) in scope.row.hotVal" :key="index" class="el-hot"></icon-svg>
          <icon-svg name="iconFireOff" v-for="(hot, index) in 5 - scope.row.hotVal" :key="10 - index"></icon-svg>
        </div>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box" v-if="permission">
          <el-tooltip effect="dark" content="移除" placement="top" :enterable="false">
            <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
  </div>
</template>
<script>
export default {
  props: {
    assetId: {
      type: [String, Number],
      required: true,
      default: ''
    },
    permission: {
      // 是否有操作权限
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '资产名称',
          prop: 'assetNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '是否关注',
          prop: 'watchFlag',
          align: 'center'
        },
        {
          show: true,
          label: '加入专辑时间',
          prop: 'joinAlbumTm',
          align: 'center'
        },
        {
          show: true,
          label: '热度',
          prop: 'hotVal',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.params.queryParams.assetAlbumId = this.assetId
      this.$ajax({
        url: this.$ajax.setUrl('ast/astAlbumDetails/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          this.$refs.albumDrawer.showDrawer()
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList(this.belongAlbumIds)
          break
      }
    },
    handleDelete(scope) {
      this.$confirm(`确定移除【${scope.assetNm}】？`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astAlbumDetails/deleteToAlbum/${this.assetId}/${scope.assetId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.msg)
            this.getList()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss"></style>
